import React, { useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import { useNavigate } from "react-router-dom";
import { scaleIn } from "../utils/animations";
import "./UploadResult.css";

interface UploadResultProps {
  imagePreview: string | null;
  onEdit: () => void;
  onRegenerate: () => void;
  onDownload: () => void;
  onShare: () => void;
  onClose?: () => void;
  isVisible?: boolean;
  // 新增的动态数据
  prompt?: string;
  format?: string;
  aspectRatio?: string;
  resolution?: string;
}

const UploadResult: React.FC<UploadResultProps> = ({
  imagePreview,
  onEdit,
  // onRegenerate,
  onDownload,
  // onShare,
  onClose,
  isVisible = false,
  // 新增的动态数据
  prompt,
  format,
  aspectRatio,
  resolution,
}) => {
  const resultRef = useRef<HTMLDivElement | null>(null);
  const navigate = useNavigate();

  useEffect(() => {
    if (isVisible && imagePreview && resultRef.current) {
      scaleIn(resultRef.current, { delay: 0.2 });
    }
  }, [isVisible, imagePreview]);

  // 跳转到画布页面进行编辑
  const handleGoToCanvas = () => {
    if (imagePreview) {
      // 关闭当前弹窗
      onClose?.();
      // 跳转到画布页面，并传递图片数据
      navigate('/gallery', { 
        state: { 
          imageToEdit: imagePreview,
          prompt: prompt,
          format: format,
          aspectRatio: aspectRatio,
          resolution: resolution
        } 
      });
    }
  };

  if (!isVisible || !imagePreview) {
    return null;
  }

  return createPortal(
    <div className="upload-result" ref={resultRef}>
      {/* Top Navigation */}
      <div className="result-topnav">
        <div className="topnav-left">
          <button className="back-btn" onClick={() => onClose?.()}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            返回
          </button>
        </div>
        <div className="topnav-center">
          <h2 className="topnav-title">图片编辑</h2>
        </div>
        <div className="topnav-right">
          <button className="topnav-action-btn" onClick={onDownload}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" strokeWidth="2"/>
              <polyline points="7,10 12,15 17,10" stroke="currentColor" strokeWidth="2"/>
              <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" strokeWidth="2"/>
            </svg>
          </button>
          <button className="topnav-action-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" stroke="currentColor" strokeWidth="2"/>
            </svg>
          </button>
          <button className="topnav-action-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="1" stroke="currentColor" strokeWidth="2"/>
              <circle cx="19" cy="12" r="1" stroke="currentColor" strokeWidth="2"/>
              <circle cx="5" cy="12" r="1" stroke="currentColor" strokeWidth="2"/>
            </svg>
          </button>
        </div>
      </div>

      <div className="result-container">
        {/* 左侧图片区域 */}
        <div className="result-left">
          <div className="result-image-container">
            <img
              src={imagePreview}
              alt="生成的图片"
              className="result-image"
            />
          </div>
        </div>
        
        {/* 右侧控制面板 */}
        <div className="result-right">

          {/* 图片信息 */}
          <div className="result-info">
            <div className="info-section">
              <h3 className="info-title">图片提示词</h3>
              <p className="info-content">{prompt || '无提示词'}</p>
            </div>
            
            {/* 缩略图网格 */}
            <div className="thumbnail-grid">
              <div className="thumbnail-item thumbnail-small">
                <img src={imagePreview} alt="缩略图1" />
              </div>
              <div className="thumbnail-item thumbnail-medium">
                <img src={imagePreview} alt="缩略图2" />
              </div>
              <div className="thumbnail-item thumbnail-large">
                <img src={imagePreview} alt="缩略图3" />
              </div>
            </div>
            
            <div className="info-section">
              <div className="info-row">
                <span className="info-label">智能参考</span>
                <span className="info-value">{format || '图片生成'}</span>
                <span className="info-value">{aspectRatio || '其他'}</span>
                <span className="info-value">{resolution || '2K'}</span>
                {/* <button className="info-details">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" stroke="currentColor" strokeWidth="2"/>
                    <line x1="12" y1="17" x2="12.01" y2="17" stroke="currentColor" strokeWidth="2"/>
                  </svg>
                  详细信息
                </button> */}
              </div>
            </div>
          </div>

          {/* 功能按钮区域 */}
          <div className="upload-result-actions">
            {/* 生成区域 */}
            <div className="action-section generate-section">
              <div className="section-header">
                <span className="section-title">生成</span>
              </div>
              <div className="section-buttons generate-buttons">
                <button className="section-btn">
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M5.889 2.112A4.889 4.889 0 0 0 1 7v10a4.89 4.89 0 0 0 4.889 4.89H18.11A4.89 4.89 0 0 0 23 17V7c0-2.7-2.189-4.888-4.889-4.888H5.89ZM3 7a2.889 2.889 0 0 1 2.889-2.888H18.11A2.889 2.889 0 0 1 21 7v10a2.889 2.889 0 0 1-2.889 2.89H5.89A2.889 2.889 0 0 1 3 17V7Zm12.405 4.4c-.175-.386-.7-.68-1.75-1.269l-1.14-.638c-1.01-.565-1.515-.848-1.928-.8a1.29 1.29 0 0 0-.9.527c-.243.337-.243.916-.243 2.073v1.277c0 1.156 0 1.735.243 2.073.213.294.539.485.9.527.413.047.918-.236 1.927-.8l1.14-.64c1.051-.587 1.576-.882 1.751-1.268a1.289 1.289 0 0 0 0-1.061Z" fill="currentColor"/>
                    </svg>
                  </div>
                  <span>生成视频</span>
                </button>
                <button className="section-btn" onClick={handleGoToCanvas}>
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M6.938 3.125a1 1 0 0 1 1 1v1.813h8.125V4.125a1 1 0 1 1 2 0v1.813h1.812a1 1 0 1 1 0 2h-1.813v2.937a1 1 0 1 1-2 0V7.937H7.938v8.125h2.938a1 1 0 1 1 0 2H7.937v1.813a1 1 0 1 1-2 0v-1.813H4.125a1 1 0 1 1 0-2h1.813V7.938H4.125a1 1 0 0 1 0-2h1.813V4.125a1 1 0 0 1 1-1Zm10.518 17.363.208-.477a3.68 3.68 0 0 1 1.871-1.898l.641-.285a.447.447 0 0 0 0-.812l-.605-.27a3.682 3.682 0 0 1-1.898-1.961l-.213-.515a.427.427 0 0 0-.794 0l-.214.515a3.682 3.682 0 0 1-1.898 1.962l-.605.269a.447.447 0 0 0 0 .812l.64.285a3.675 3.675 0 0 1 1.872 1.898l.208.477c.152.35.635.35.787 0Z" fill="currentColor"/>
                    </svg>
                  </div>
                  <span>去画布进行编辑</span>
                </button>
              </div>
            </div>

            {/* 编辑区域 */}
            <div className="action-section edit-section">
              <div className="section-header">
                <span className="section-title">编辑</span>
              </div>
              <div className="section-buttons grid-buttons">
                <button className="section-btn">
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke="currentColor" strokeWidth="2"/>
                      <line x1="8" y1="21" x2="16" y2="21" stroke="currentColor" strokeWidth="2"/>
                      <line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                  </div>
                  <span>高清放大</span>
                </button>
                <button className="section-btn" onClick={onEdit}>
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" stroke="currentColor" strokeWidth="2"/>
                      <path d="M21 3v5h-5" stroke="currentColor" strokeWidth="2"/>
                      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" stroke="currentColor" strokeWidth="2"/>
                      <path d="M8 16H3v5" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                  </div>
                  <span>重新编辑</span>
                </button>
                {/* <button className="section-btn">
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke="currentColor" strokeWidth="2"/>
                      <line x1="8" y1="21" x2="16" y2="21" stroke="currentColor" strokeWidth="2"/>
                      <line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                  </div>
                  <span>超清</span>
                </button> */}
                {/* <button className="section-btn">
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                  </div>
                  <span>细节修复</span>
                </button>
                <button className="section-btn">
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                  </div>
                  <span>局部重绘</span>
                </button>
                <button className="section-btn">
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                  </div>
                  <span>扩图</span>
                </button>
                <button className="section-btn">
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                  </div>
                  <span>消除笔</span>
                </button>
                <button className="section-btn">
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                  </div>
                  <span>对口型</span>
                </button> */}
              </div>
            </div>

            {/* 更多区域 */}
            {/* <div className="action-section more-section">
              <div className="section-header">
                <span className="section-title">更多</span>
              </div>
              <div className="section-buttons more-buttons">
                <button className="section-btn" onClick={onEdit}>
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" stroke="currentColor" strokeWidth="2"/>
                      <path d="M21 3v5h-5" stroke="currentColor" strokeWidth="2"/>
                      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" stroke="currentColor" strokeWidth="2"/>
                      <path d="M8 16H3v5" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                  </div>
                  <span>重新编辑</span>
                </button>
                <button className="section-btn" onClick={onRegenerate}>
                  <div className="btn-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" stroke="currentColor" strokeWidth="2"/>
                      <path d="M21 3v5h-5" stroke="currentColor" strokeWidth="2"/>
                      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" stroke="currentColor" strokeWidth="2"/>
                      <path d="M8 16H3v5" stroke="currentColor" strokeWidth="2"/>
                    </svg>
                  </div>
                  <span>再次生成</span>
                </button>
              </div>
            </div> */}
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default UploadResult;
